<template>
  <vxe-modal id="fileDialog" v-model="showDialog" title="分配角色" @confirm="confirm" :destroy-on-close="true" width="650px" show-footer>
    <el-transfer
      filterable
      filter-placeholder="请输入角色名称"
      :titles="['角色列表', '已分配角色列表']"
      :props="{
        key: 'role_no',
        label: 'role_name'
      }"
      v-model="value"
      :data="roleList">
    </el-transfer>
  </vxe-modal>
</template>

<script>
import {getRoleList,getRoleListByUserid,updateUserRole} from '@/api/template/permission'

export default {
  data() {
    return {
      userid:'',
      value:[],
      roleList:[],
      showDialog: false
    }
  },
  methods: {
    show(params) {
      const { userid } = params
      this.userid = userid
      this.showDialog = true
      this.getRoleList()
      this.getRoleListByUserid()
    },
    getRoleList() {
      getRoleList().then(res => {
        this.roleList = res.list
      })
    },
    getRoleListByUserid() {
      getRoleListByUserid({userid:this.userid}).then(res => {
        this.value = res.list
      })
    },
    confirm(){
      updateUserRole(this.value,this.userid).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
      })
      this.$emit('confirm')
    },
    close() {
      this.showDialog = false
    }
  }
}
</script>
